<div class="card">
    <div class="card-header">
        <button id="addAdminBtn" type="button" class="btn btn-primary" data-toggle="modal"
                data-target="#modal-default">添加管理员</button>
    </div>
    <!-- /.card-header -->
    <div class="card-body" id="adminTable">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width: 10px">#</th>
                    <th>Task</th>
                    <th>Progress</th>
                    <th style="width: 40px">Label</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.</td>
                    <td>Update software</td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                        </div>
                    </td>
                    <td><span class="badge bg-danger">55%</span></td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Clean database</td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-warning" style="width: 70%"></div>
                        </div>
                    </td>
                    <td><span class="badge bg-warning">70%</span></td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Cron job running</td>
                    <td>
                        <div class="progress progress-xs progress-striped active">
                            <div class="progress-bar bg-primary" style="width: 30%"></div>
                        </div>
                    </td>
                    <td><span class="badge bg-primary">30%</span></td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Fix and squish bugs</td>
                    <td>
                        <div class="progress progress-xs progress-striped active">
                            <div class="progress-bar bg-success" style="width: 90%"></div>
                        </div>
                    </td>
                    <td><span class="badge bg-success">90%</span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade show" id="modal-default" style="display: none; padding-right: 17px;" aria-modal="true"
     role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加管理员</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form name="adminForm">
                    <div class="form-group">
                        <label for="adminName">管理员账号</label>
                        <input name="adminName" type="text" class="form-control" id="adminName" placeholder="请输入管理员账号">
                    </div>
                    <div class="form-group">
                        <label for="password">管理员密码</label>
                        <input name="password" type="password" class="form-control" id="passWord" placeholder="请输入管理员密码">
                    </div>
                    <div class="form-group">
                        <label for="rePassword">重复密码</label>
                        <input name="rePassword" type="password" class="form-control" id="rePpassWord" placeholder="请再次输入管理密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" id="closeAdminBtn" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveAdminBtn">保存</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
